<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('预览视频')" />
    <meta charset="utf-8">
    <meta name=viewport
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: auto;
            overflow: hidden;
        }
    </style>
</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
</div>
<input type="hidden" th:value="${video.videoUrl}" id="videoUrl" />
<input type="hidden" th:value="${video.url}" id="url" />

<th:block th:include="include :: footer" />

<script>
        $(function () {
            let player = new Player({
                "volume": 0.0,
                "id": "mse",
                "poster": document.getElementById("url").value ? document.getElementById("url").value : '',
                "url": document.getElementById("videoUrl").value ? document.getElementById("videoUrl").value : "https://video.jializyw.com:8800/20200706/LdyE4Wil/index.m3u8",
                "playsinline": true,
                "whitelist": [
                    ""
                ],
                "autoplay": false,
                "fluid": true,
            });
        });
    </script>
</body>

</html>